<template>
  <div>
    <div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import '../../../static/ueditor/ueditor.config.js';
  import '../../../static/ueditor/ueditor.all.js';
  import '../../../static/ueditor/lang/zh-cn/zh-cn.js';
  export default {
    name: 'ueditor',
    props: {
      content: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        ue: null,
        uedata: '',
        test: ''
      }
    },
    mounted() {
      UE.delEditor('editor')
      this.ue = UE.getEditor('editor',{
        BaseUrl: '',
        UEDITOR_HOME_URL: 'static/ueditor/'
      });
    },
    methods: {
      getUeditorContent() {
        this.uedata = UE.getEditor('editor').getContent()
        this.$store.commit('setEditerHtml', this.uedata)
      },
      setUeditorContent: function () {
        UE.getEditor('editor').setContent(this.content)
      }
    },
    created() {
      this.$on('getUeditorContent', () => {
        this.getUeditorContent()
      });
      this.$on('setUeditorContent', () => {
        this.setUeditorContent()
      });
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
